<template>
	<div class="yh_content foSi14">
		<div class="statistics-income__bar-box">
			<div class="dis disAl disJuB">
				<div class="foSi16 fowe800">总计收入</div>
				<div class="dis disAl">
					<div class="time-cycle__item time-first" @click.stop="statisticsClick(1)"
						:class="timeStatistics === 1?'curr':''">按月</div>
					<div class="time-cycle__item" @click.stop="statisticsClick(2)"
						:class="timeStatistics === 2?'curr':''">按天</div>
					<div class="time-cycle__item time-last" @click.stop="statisticsClick(3)"
						:class="timeStatistics === 3?'curr':''">按年</div>
					<div class="dis disAl hei32 borRad5 mar-left5" style="border: 1px solid #e0dfe4;">
						<el-date-picker class="jlpMySelect" v-model="birthday_start" size="small" @change="timeChange"
							:clearable="false" :type="timeStatistics === 1?'month':timeStatistics === 3?'year':'date'"
							placeholder="开始时间" :picker-options="{disabledDate:dateOptions}" />
						<div>至</div>
						<el-date-picker class="jlpMySelect" v-model="birthday_end" size="small" @change="timeChange"
							:clearable="false" :type="timeStatistics === 1?'month':timeStatistics === 3?'year':'date'"
							placeholder="截至日期" :picker-options="{disabledDate:dateOptions}" />
						<div class="hei100 dis disAl disJuC" style="width: 30px;">
							<i class="el-icon-date"></i>
						</div>
					</div>
					<el-button type="primary" class="mar-left5 mar-right10" size="small">导出报表</el-button>
					<el-popover popper-class="popo" placement="bottom" width="800" trigger="click">
						<div class="wid100">
							<div class="wid95 mar dis" :class="index !== 0?'mar-top5':''"
								v-for="(item, index) in tsList" :key="index">
								<div class="fowe800">{{item.title}}</div>
								<div style="width: 80%;">{{item.text}}</div>
							</div>
						</div>
						<svg-icon slot="reference" icon-class="tishi" class="mar0 cuPo"
							style="color: #6b7cdd;width: 20px;height: 20px;" />
					</el-popover>
				</div>
			</div>
			<div class="wid100" id="drawChart" style="height: 304px;"></div>
		</div>
		<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column prop="name" label="日期" />
			<el-table-column prop="name" label="发卡收入" />
			<el-table-column prop="name" label="续卡收入" />
			<el-table-column prop="name" label="卡升级收入" />
			<el-table-column prop="name" label="转卡收入" />
			<el-table-column prop="name" label="付费预约收入" />
			<el-table-column prop="name" label="商品收入" />
			<el-table-column prop="name" label="班课收入" />
			<el-table-column prop="name" label="其他收入" />
			<el-table-column prop="name" label="退卡金额" style="color: #f5934b;" />
			<el-table-column prop="name" label="商品退货金额" style="color: #f5934b;" />
			<el-table-column prop="name" label="班课出班退款金额" style="color: #f5934b;" />
			<el-table-column prop="name" label="总计收入	" style="color: #6b7cdd;" />
		</el-table>
	</div>
</template>

<script>
	//导入echarts
	import echarts from "echarts";
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'incomeSummary',
		components: {},
		data() {
			return {
				list: null,
				listLoading: false,
				timeStatistics: 1,
				birthday_start: '',
				birthday_end: '',
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6;
				},
				dateOptions1(time) {
					return time.getTime() < Date.now() - 8.64e7;
				},
				tsList: [{
						title: '按月统计：',
						text: '可统计12个月数据'
					},
					{
						title: '按天统计：',
						text: '可统计61天数据'
					},
					{
						title: '按年统计：',
						text: '可统计10年数据'
					},
					{
						title: '发卡收入：',
						text: '包含馆主端和会员端自行下单办卡所产生的实收金额，不包括储值卡支付部分'
					},
					{
						title: '续卡收入：',
						text: '续卡实收金额，不包括储值卡支付部分'
					},
					{
						title: '卡升级收入：',
						text: '卡升级实收金额，不包括储值卡支付部分'
					},
					{
						title: '转卡收入：',
						text: '转卡手续费实收金额，不包括储值卡支付'
					},
					{
						title: '付费约课收入：',
						text: '通过付费约课产生的收入'
					},
					{
						title: '商品收入：',
						text: '通过商品管理、分销商城、积分商城产生的实际支付金额，不包含储值卡支付的部分'
					},
					{
						title: '班课收入：',
						text: '包含入班、转班、续班产生的实际支付金额，不包含通过储值卡支付的部分'
					},
					{
						title: '其他收入：',
						text: '包含收费请假、收费停卡、收费视频课（不包含会员卡支付）、收费直播、补卡手续费、收费报名活动的实收金额'
					},
					{
						title: '退卡金额：',
						text: '只统计实际退卡金额，不包含以储值卡方式退卡金额（包含删除卡时卡内的剩余资产）'
					},
					{
						title: '商品退货金额：',
						text: '只统计实际退款金额，不包含以储值卡方式退款金额'
					},
					{
						title: '班课出班退款金额：',
						text: '只统计实际退款金额，不包含以储值卡方式退款金额'
					},
					{
						title: '总计收入：',
						text: '发卡收入+续卡收入+卡升级收入+付费预约收入+商品收入+班课收入+其他收入-退卡金额-商品退货金额-班课出班退款金额'
					},
					{
						title: '统计时间：',
						text: '统计时间可统计截止到昨日的数据'
					}
				]
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '收入汇总',
				url: '/finance/incomeSummary',
				pd: true
			}, 
			{
				name: '售卡统计',
				url: '/finance/statisticsCards',
				pd: true
			}, 
			{
				name: '班课数据统计',
				url: '/course/classPrivateData',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
		},
		mounted: function() {
			this.timeCreated(1)
		},
		methods: {
			getList() {},
			timeCreated(index) {
				var now = new Date();
				var month = now.getMonth();
				var year = now.getFullYear();
				if (index === 1) {
					this.birthday_start = new Date(month == 12 ? year : year - 1, month == 12 ? 1 : month + 1, 1)
				} else if (index === 2) {
					this.birthday_start = new Date(now.getTime() - 60 * 24 * 60 * 60 * 1000);;
				} else {
					this.birthday_start = new Date(year - 9, month, 1);
				}
				this.birthday_end = now
				this.getDrawChart()
				this.getList()
			},
			statisticsClick(index) {
				if (index !== this.timeStatistics) {
					this.timeStatistics = index
					this.timeCreated(index)
				}
			},
			timeChange(e) {
				if (!this.birthday_start || !this.birthday_end) {
					this.$message.error('信息不完整(请输入时间)');
				} else {
					var sta = new Date(this.birthday_start)
					var end = new Date(this.birthday_end)
					if (end < sta) {
						this.birthday_end = ''
						this.$message.error('截止时间不得小于开始时间');
					} else {
						var diff = end.getFullYear() - sta.getFullYear();
						let months = diff * 12 - sta.getMonth() + end.getMonth();
						var days = parseInt((end - sta) / (24 * 60 * 60 * 1000)); //天
						console.log(diff)
						console.log(months)
						console.log(days)
						if (this.timeStatistics === 1 && months > 11) {
							this.$message.error('查询最大时间跨度不能超过12个月，请重新选择');
						} else if (this.timeStatistics === 2 && days > 60) {
							this.$message.error('查询最大时间跨度不能超过61天，请重新选择');
						} else if (this.timeStatistics === 3 && diff > 9) {
							this.$message.error('查询最大时间跨度不能超过10年，请重新选择');
						}
					}
				}
			},
			getDrawChart() {
				// var queryParams = {
				// 	'': this.birthday_start,
				// 	'': this.birthday_end
				// }
				// // 绘制图表
				// listProductChart(queryParams).then((response) => {});
				var list = {
					xList: [],
					yList: []
				};
				if (this.timeStatistics === 1) {
					list.xList = ['12月','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月']
					list.yList = [0,0,0,0,0,0,0,0,0,0,0,0]
				} else if (this.timeStatistics === 2) {
					list.xList = [
						'09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12',
						'09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12',
						'09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12',
						'09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12',
						'09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12','09/12',
					]
					list.yList = [
						0,0,0,0,0,0,0,0,0,0,
						0,0,0,0,0,0,0,0,0,0,
						0,0,0,0,0,0,0,0,0,0,
						0,0,0,0,0,0,0,0,0,0,
						0,0,0,0,0,0,0,0,0,0
					]
				} else if (this.timeStatistics === 3) {
					list.xList = ['2015','2016','2017','2018','2019','2020','2021','2022','2023','2024']
					list.yList = [0,0,0,0,0,0,0,0,0,0]
				}
				let myChart = echarts.init(document.getElementById("drawChart"));
				if (true) {
					myChart.setOption({
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							top: '10%',
							left: '0%',
							right: '2%',
							bottom: '5%',
							containLabel: true
						},
						xAxis: [{
							show:true,
							type: 'category',
							axisLine:{     //x轴坐标轴
								show:false
							},
							axisLabel:{
								show: true
							},
							axisTick: {		//x轴刻度线
								show:false,
								alignWithLabel: false, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
							},
							data: list.xList
						}],
						yAxis: [{
							type: 'value',
							axisLine: {
								show: false //y轴不显示刻度线
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed' //背景色为虚线
								}
							}
						}],
						series: [{
							color: '#6b7cdd',
							name: '',
							type: 'bar',
							barWidth: '60%',
							data: list.yList
						}]
					});
				} else {
					echarts.init(document.getElementById("drawChart")).dispose(); //无数据则清空图表内容
				}
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.statistics-income__bar-box {
		position: relative;
		margin-bottom: 20px;
		height: 356px;
		padding: 16px 16px 0;
		box-sizing: border-box;
		background: #fff;
		border-radius: 8px;
		border: 1px solid #e0dfe4;
	}

	.time-first {
		border-radius: 4px 0 0 4px;
	}

	.time-last {
		border-radius: 0 4px 4px 0;
	}

	.time-cycle__item {
		position: relative;
		margin-left: -1px;
		width: 72px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		color: #787878;
		border: 1px solid #d9d9d9;
		cursor: pointer;
	}

	.time-cycle__item.curr {
		border: 1px solid #6b7cdd;
		color: #6b7cdd;
		z-index: 2;
	}
</style>

<style>
	.jlpMySelect {
		width: 88px !important;
		padding-left: 8px;
		height: 32px;
	}

	.jlpMySelect .el-input__inner {
		width: 100% !important;
		font-size: 12px;
		color: #787878;
		text-align: center !important;
		border: 0 !important;
		padding: 0 !important;
		background: none;
	}

	.jlpMySelect .el-input__prefix {
		display: none;
	}
</style>